<template>
  <div>
    <page-title title="待审核订单/处理" home-path="/standard/home"></page-title>
      <div class="pageMain">
        <div class="pageMain-title">
          <span>待处理订单详情</span>
        </div>
        <div class="pageMain-body">
          <div class="orderTip"></div>
          <order-detail :form-data="orderInfo" style="margin: auto" _width="600px">
            <template slot="orderFoot">
              <span class="flex-container">
                <el-button type="success" size="small" @click="returnSale">退回销售</el-button>
                <el-button type="warning" size="small" @click="handleRouterGo">分发订单</el-button>
              </span>
            </template>
          </order-detail>
        </div>
      </div>
      <el-dialog :visible.sync="dialogFormVisible" :close-on-click-modal="false" title="退回销售"  width="30%" >
        <el-form ref="returnForm" :model="returnForm" :rules="rules">
          <el-form-item label="退回原因" prop="returnReason">
            <el-input v-model="returnForm.returnReason" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancelReturn">取 消</el-button>
          <el-button type="primary" @click="submitReturn">确 定</el-button>
        </div>
      </el-dialog>
      <el-dialog :visible.sync="dialogVisibleOfDept" title="选择分发单位部门及主任" >
        <el-form :model="fenfaOrder">
          <el-form-item label="分发单位" prop="companyId">
            <el-select v-model="fenfaOrder.companyId" placeholder="请选择分发单位" @change="handleCompanyChange">
              <el-option v-for="item in companyList" :key="item.id" :label="item.organizationName" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="分发部门" prop="deptId">
            <el-select v-model="fenfaOrder.deptId" placeholder="请选择分发部门" @change="handleDeptChange">
              <el-option v-for="item in deptList" :key="item.id" :label="item.organizationName" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="分发主任" prop="userId">
            <el-select v-model="fenfaOrder.userId" placeholder="请选择分发主任">
              <el-option v-for="item in peopleList" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogVisibleOfDept = false">取 消</el-button>
          <el-button type="primary" @click="submitOrder">确 定</el-button>
        </div>
      </el-dialog>
  </div>

</template>

<script>
import OrderDetail from "@/components/OrderDetail.vue";
import PageTitle from "@/components/PageTitle.vue";
import {
  getReviewedLeftList,
  RETURNSELL,
  GET_DEPT,
  GET_COMPANY,
  GET_PEOPLE_DEPT,
  SEND_ORDER
} from "@/lib/Api.js";
import { post, get } from "@/lib/Util.js";
export default {
  components: {
    OrderDetail,
    PageTitle
  },
  data() {
    return {
      label_style: {
        width: "200px"
      },
      orderInfo: {},
      id: "",
      dialogFormVisible: false,
      returnForm: {
        id: this.id,
        returnReason: ""
      },
      rules: {
        returnReason: [
          { required: true, message: "请输入退回原因", trigger: "blur" }
        ]
      },
      fenfaOrder: {
        companyId: "",
        deptId: "",
        userId: ""
      },
      companyList: [],
      deptList: [],
      peopleList: [],
      dialogVisibleOfDept: false
    };
  },
  created() {
    this.id = this.$route.params.id;
    this.getPendingOrders();
    this.getDept(); // 查询单位
  },
  methods: {
    // 查询单位
    async getDept() {
      let res = await post(GET_COMPANY);
      if (res.data) {
        this.companyList = res.data;
      } else {
        this.companyList = [];
      }
    },
    // 查询部门
    handleCompanyChange(val) {
      post(GET_DEPT, { id: val }).then(res => {
        if (res.data) {
          this.deptList = res.data;
        } else {
          this.deptList = [];
        }
      });
    },
    // 查询主任
    handleDeptChange(val) {
      post(GET_PEOPLE_DEPT, { id: val }).then(res => {
        if (res.data) {
          this.peopleList = res.data;
        } else {
          this.peopleList = [];
        }
      });
    },
    getPendingOrders() {
      let data = {
        contractInfoId: this.id
      };
      post(getReviewedLeftList, data).then(resp => {
        this.orderInfo = resp.data;
      });
    },
    returnSale() {
      // 打开对话框时，重置表单
      this.resetReturnForm();
      this.dialogFormVisible = true;
    },
    resetReturnForm() {
      this.returnForm.returnReason = ""; // 清空表单
      if (this.$refs.returnForm) {
        this.$refs.returnForm.clearValidate(); // 清除校验状态
      }
    },
    cancelReturn() {
      this.dialogFormVisible = false; // 关闭对话框
      this.returnForm.returnReason = ""; // 清空退回原因
    },
    submitReturn() {
      this.$refs.returnForm.validate(valid => {
        if (valid) {
          const data = {
            id: this.id,
            returnReason: this.returnForm.returnReason
          };
          post(RETURNSELL, data)
            .then(() => {
              this.$message.success("退回成功");
              this.dialogFormVisible = false;
              this.$router.push({
                name: "standard-pendingOrderReview",
                params: { id: this.id }
              });
            })
            .catch(error => {
              console.error(error);
              this.$message.error("退回失败，请重试");
            });
        } else {
          this.$message.error("请填写退回原因");
        }
      });
    },
    handleRouterGo() {
      this.dialogVisibleOfDept = true;
    },
    submitOrder() {
      this.dialogVisibleOfDept = false;
      post(SEND_ORDER, {
        id: this.fenfaOrder.userId,
        contractInfoId: this.id
      }).then(res => {
        if (res.code == 200) {
          this.$message({
            message: res.message,
            type: "success"
          });
        } else {
          this.$message({
            message: res.message,
            type: "warning"
          });
        }
        this.$router.push({ path: "/standard/pendingOrderReview" });
      });
    }
  }
};
</script>
<style scoped>
.orderTip {
  height: 30px;
  margin: 6px 0;
}

.flex-container {
  display: flex;
  justify-content: flex-end;
}
</style>
